<template>
  <div>
    {{this.$route.query.id}}
    <fieldset>
    <h4 align="center">注册成功！补全信息即可使用平台服务！</h4>
    <el-form  :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
      <el-form-item label="公司名称" prop="name">
        <el-input type="text" v-model="ruleForm2.name" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="负责人姓名" prop="corporation">
        <el-input type="text" v-model="ruleForm2.corporation" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="certNum">
        <el-input v-model="ruleForm2.certNum"></el-input>
      </el-form-item>
      <el-form-item label="身份证照片"  style="display: inline" >
        <el-upload
          class="upload-demo"
          action="http://localhost/dev-api/file/file/upload"
          :on-preview="handlePreview"
          :on-success="handleAvatarSuccess1"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="1"
          :on-exceed="handleExceed"
          >
          <el-button size="small" type="primary">正面照</el-button>
        </el-upload>
        <el-upload
          class="upload-demo"
          action="http://localhost/dev-api/file/file/upload"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="handleAvatarSuccess2"
          :before-remove="beforeRemove"
          multiple
          :limit="1"
          :on-exceed="handleExceed">
          <el-button size="small" type="primary">背面照</el-button>
        </el-upload>
        <el-upload
          class="upload-demo"
          action="http://localhost/dev-api/file/file/upload"
          :on-preview="handlePreview"
          :on-success="handleAvatarSuccess3"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="1"
          :on-exceed="handleExceed">
          <el-button size="small" type="primary">手持身份证照</el-button>
        </el-upload>
      </el-form-item>
      <!--<el-form-item label="办公地址" prop="address">
        <el-input v-model.number="ruleForm2.age"></el-input>
      </el-form-item>-->
      <el-form-item label="详细地址" prop="address">
        <el-input v-model="ruleForm2.address"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width: 650px;" @click="submitForm('ruleForm2')">提交</el-button>
      </el-form-item>
    </el-form>
    </fieldset>
  </div>

</template>

<script>
  import {listBusiness,getBusiness,addBusiness,updateBusiness,delBusiness,getSmsCode,register } from "@/api/system/business";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import log from "../../monitor/job/log";
    export default {
        name: "update",
      data() {
        return {
          fileList:[],
          ruleForm2: {
            userId:'',
            name: '',
            corporation: '',
            certNum: '',
            certPicture:'',
            certPicture2:'',
            certPicture3:'',
            address:'',
          },
          rules2: {
            name: [
              { required: true, message: '请输入公司名称', trigger: 'blur' },
            ],
            corporation: [
              { required: true, message: '请输入负责人', trigger: 'blur' },
            ],
            certNum: [
              { required: true, message: '请输入身份证号', trigger: 'blur' },
            ],
            address: [
              { required: true, message: '请输入地址', trigger: 'blur' },
            ],
          }
        };
      },
      methods: {
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePreview(file) {
          console.log(file);
        },
        handleExceed(files, fileList) {
          this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
          return this.$confirm(`确定移除 ${ file.name }？`);
        },
        handleAvatarSuccess1(res, file) {
          this.ruleForm2.certPicture = res.data.url;
          console.log("地址："+this.ruleForm2.certPicture)
        },
        handleAvatarSuccess2(res, file) {
          this.ruleForm2.certPicture2 = res.data.url;
          console.log("地址："+this.ruleForm2.certPicture2)
        },
        handleAvatarSuccess3(res, file) {
          this.ruleForm2.certPicture3 = res.data.url;
          console.log("地址："+this.ruleForm2.certPicture3)
        },
        beforeAvatarUpload(file) {
          const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        },
        submitForm(formName) {
          //获取userid
          this.ruleForm2.userId=this.$route.params.id;
          this.$refs[formName].validate((valid) => {
            if (valid) {
              addBusiness(this.ruleForm2).then(res=>{
                this.$message({type:"success",message:res.msg})
                this.$router.push("/hello")
              }).catch(function (error) {
                this.$message({type:"error",message:res.msg})
              })
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        }
      },
      created() {
      }
    }
</script>

<style scoped>
  fieldset {
    /* 表单页面居中，宽度50% ,legend颜色设置，legend圆角*/
    border:2px solid #DCDFE6;  text-align:left; border-radius: 8px;margin: 0 auto;width:40%;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
